<template>
  <div class="all">
    <van-nav-bar
      title="班级信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <div class="ctitle">
      <b>
        班级基本信息
      </b>
    </div>
    <div class="juzhong">
      <div class="cmsg">
        <div>
          班级：15140A01
        </div>
        <div>
          学校：中北大学
        </div>
        <div>
          系/学院：软件学院
        </div>
        <div>
          学年：大三学年
        </div>
    </div>

    </div>
    <div class="ctitle2">
      <b>教师信息</b>
    </div>
    <div class="tmsg">
      <div class="item1">
        <img src="../assets/test.jpg" class="avatur">
        <div>
          <b>班主任</b>
          <div>张小明</div>
          <div>18235126663</div>
        </div>
      </div>
      <div class="item2">
        <img src="../assets/avatur.jpg" class="avatur">
        <div>
          <b>离散数学</b>
          <div>马巧梅</div>
          <div>18235126663</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "class-msg",
    methods:{
      onClickLeft:function(){

      }
    }
  }
</script>

<style scoped>
  .ctitle {
    border-left: 5px solid #00c8ff;
    padding: 5px 0 5px 8px;
    color: gray;
  }

  .ctitle2 {
    border-left: 5px solid #00c8ff;
    padding: 5px 0 5px 8px;
    color: gray;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .cmsg {
    padding-top: 8px;
    padding-left: 15px;
    padding-bottom: 7px;
    box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.2);
    border-radius: 9px;
    margin-top: 10px;
    color: rgb(100, 100, 100);
    margin-left: 3%;
    margin-right: 3%;
  }

  .avatur {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 8px;
  }

  .item1 {
    float: left;
    text-align: center;
    border-radius: 9px;
    width: 49%;
    box-shadow: 0 0 3px #cebac7;
  }

  .item2 {
    float: right;
    box-shadow: 0 0 3px #cebac7;
    border-radius: 9px;
    width: 49%;
    text-align: center;
  }
  .juzhong{
    align-items: center;
  }
  .tmsg{
    margin-left: 3%;
    margin-right: 3%;
  }
</style>
